<template>
<div id="tmpl">
	<div id="desc">
		<div class="title">
			<h4>{{photoinfo.title}}</h4>
			<p>{{photoinfo.add_time|datefmt('YYYY-MM-DD HH:mm:ss')}}  {{photoinfo.click}}次浏览</p>
			<p class="line"></p>
		</div>
		<div class="mui-content">
		        <ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li  v-for="(item, index) in list" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		  				<img class="preview-img" :src="item.src" height="100" @click="$preview.open(index, list)" />
		            </li>		      
		        </ul> 
		</div>
		<p v-html="photoinfo.content"></p>
	</div>
	
	<div id="comment">
	<comment :id="id"></comment>
	</div>
	
</div>
</template>

<script>
	import comment from '../subcon/comment.vue';
	import common from '../../kits/common.js';
	import {Toast} from 'mint-ui';
	export default{
		components:{
			comment
		},
		data(){
			return {
				id:0,
				photoinfo:{},
				list:[]
			}
		},
		created(){
			this.id=this.$route.params.id;
			this.getphotoinfo();
			this.getimg();
		},
		methods:{
			getimg(){
				var url=common.apidomain+'/api/getthumimages/'+this.id;
					this.$http.get(url).then(function(res) {
					var data=res.body;
					if(data.status!=0){
						Toast(data.message);
						return;
					}
					data.message.forEach(function(item) {
						var img=document.createElement('img');
						img.src=item.src;
						item.h=img.height;
						item.w=img.width;
						
					})
					this.list=data.message;
				})
			},
			getphotoinfo(){
				var url=common.apidomain+'/api/getimageInfo/'+this.id;
				this.$http.get(url).then(function(res) {
					var data=res.body;
					if(data.status!=0){
						Toast(data.message);
						return;
					}
					this.photoinfo=data.message[0];
				})
			}
		}
		
	}
</script>

<style scoped>
	  #desc{
	  padding: 10px;
  }
	#desc  .title h4{
		color: #0094ff;
	}

  #desc .title p{
	color:rgba(0,0,0,0.4);
	  margin-top: 10px;
  }

  #desc .title .line{
	  width: 100%;
	  height: 1px;
	  border-bottom: 1px solid rgba(0,0,0,0.4);
  }
  .mui-content,.mui-content ul{
	  background-color: #fff;
  }
  .mui-grid-view.mui-grid-9 .mui-table-view-cell{
	  border-right:0px;
	  border-bottom:0px;
  }
  .mui-grid-view.mui-grid-9{
	  border-top:0px;
	  border-left:0px;
  }
  .mui-content img{
		width: 100px;
		height: 100px;
	}
</style>